<template>
  <div class="page-table">
    <div class="grid">
      <div class="item">
        <div class="title-bar">
          <h2>城市</h2>
          <div class="op">
            <el-button size="mini" type="primary" plain @click="addCity">新增</el-button>
            <el-button size="mini" type="primary" plain :disabled="!selectedCityCode" @click="editCity">修改</el-button>
            <el-button size="mini" type="primary" plain :disabled="!selectedCityCode" @click="delCity">删除</el-button>
            <!-- <el-button size="mini" type="primary" plain @click="getInitCityList">刷新</el-button> -->
          </div>
        </div>
        <ad-table :data="cityList" u-table :data-changes-scroll-top="cityIsScrollTop"
                  @row-click="selectCity" :searchQuery="citySearchQuery" @search="getInitCityList"
                  v-el-table-infinite-scroll="getMoreCityList" :infinite-scroll-disabled="cityComplete"
                  :infinite-scroll-distance="600">
          <ad-table-column label="区划代码" prop="code" w="4c"/>
          <ad-table-column label="名称" prop="name" searchable sortable w="2c2f"/>
          <ad-table-column label="是否县级市" prop="hasCounty" dictName="is_county" sortable w="5c1f"/>
          <ad-table-column label="所属城市" prop="cityName"/>
          <ad-table-column label="所属省份" prop="provinceName"/>
          <ad-table-column width="auto"/>
        </ad-table>
      </div>
      <div class="item">
        <div class="title-bar">
          <h2>区</h2>
          <div class="op">
            <el-button size="mini" type="primary" plain :disabled="!selectedCityCode" @click="addArea">新增</el-button>
            <el-button size="mini" type="primary" plain :disabled="!selectedAreaCode" @click="editArea">修改</el-button>
            <el-button size="mini" type="primary" plain :disabled="!selectedAreaCode" @click="delArea">删除</el-button>
            <!-- <el-button size="mini" type="primary" plain :disabled="!selectedCityCode" @click="getInitAreaList(selectedCityCode)">刷新</el-button> -->
          </div>
        </div>
        <ad-table :data="areaList" @row-click="selectArea" >
          <ad-table-column label="区划代码" prop="code"/>
          <ad-table-column label="名称" prop="name"/>
          <ad-table-column label="所属城市" prop="cityName"/>
          <ad-table-column width="auto"/>
        </ad-table>
      </div>
    </div>

    <el-dialog title="城市" :visible.sync="cityAdderVisible" custom-class="ad-dialog">
      <city-adder :mode="cityAdderMode" :id="selectedCityCode" :visible.sync="cityAdderVisible" @saved="updateCityList"/>
    </el-dialog>
    <el-dialog title="区" :visible.sync="areaAdderVisible" custom-class="ad-dialog">
      <area-adder :mode="areaAdderMode" :id="selectedAreaCode" :selectedCity="selectedCity" :visible.sync="areaAdderVisible" @saved="updateAreaList"/>
    </el-dialog>
  </div>
</template>

<script>
import AdTable from '@/components/AdTable'
import AdTableColumn from '@/components/AdTable/AdTableColumn'
import cityAdder from './cityAdder'
import areaAdder from './areaAdder'
import { getList as getCityList, del as delCity } from '@/api/region/city'
import { getList as getAreaList, del as delArea } from '@/api/region/area'

class Query {
  begin = 0
  count = 80
}

export default {
  components: { AdTable, AdTableColumn, cityAdder, areaAdder },
  dicts: ['is_county'],
  data() {
    return {
      citySearchQuery: {},
      cityFilterQuery: {},
      cityQuery: new Query(),
      areaQuery: new Query(),
      cityLoading: true,
      cityComplete: false,
      areaComplete: false,
      cityList: [],
      areaList: [],
      cityIsScrollTop: false,
      areaIsScrollTop: false,
      selectedCityCode: '',
      selectedCity: '',
      selectedAreaCode: '',
      cityAdderVisible: false,
      areaAdderVisible: false,
      cityAdderMode: '',
      areaAdderMode: '',
      // cityAdderQuery: null,
      // cityAdderDetail: null,
      // areaAdderDetail: null,
    }
  },
  created() {
    this.init()
  },
  methods: {
    selectCity(row) {
      const cityCode = row.code
      this.selectedCityCode = cityCode
      this.selectedCity = row
      this.selectedAreaCode = ''
      this.getInitAreaList(cityCode)
    },
    selectArea(row) {
      const areaCode = row.code
      this.selectedAreaCode = areaCode
    },
    addCity() {
      this.openCityAdder()
    },
    editCity() {
      this.openCityAdder('edit')
    },
    delCity() {
      this.$confirm('确定删除吗？','删除').then(() => {
        this.startDelCity(this.selectedCityCode)
      }).catch(err => {})
    },
    startDelCity(cityCode) {
      this.beforeDelCity()
      delCity(cityCode)
        .then(res => {
          this.endDelCity()
        })
        .catch(err => {
          this.delCityFailed()
        })
        .finally(() => {
        })
    },
    beforeDelCity() {

    },
    endDelCity() {
      this.getInitCityList()
    },
    delCityFailed() {

    },
    addArea() {
      this.openAreaAdder()
    },
    editArea() {
      this.openAreaAdder('edit')
    },
    delArea() {
      this.$confirm('确定删除吗？','删除').then(() => {
        this.startDelArea(this.selectedAreaCode)
      }).catch(err => {})
    },
    startDelArea(code) {
      this.beforeDelArea()
      delArea(code)
        .then(res => {
          this.getInitAreaList(this.selectedCityCode)
        })
        .catch(err => {
          this.delAreaFailed()
        })
        .finally(() => {
          this.endDelArea()
        })
    },
    beforeDelArea() {

    },
    endDelArea() {

    },
    delAreaFailed() {

    },
    openCityAdder(mode) {
      this.cityAdderVisible = true
      if (mode == 'edit') {
        this.cityAdderMode = mode
        // this.cityAdderQuery = { cityCode: this.selectedCityCode }
        // this.cityAdderDetail = { cityCode: this.selectedCityCode }
      } else {
        this.cityAdderMode = ''
        // this.cityAdderQuery = null
        // this.cityAdderDetail = null
      }
    },
    openAreaAdder(mode) {
      this.areaAdderVisible = true
      if (mode == 'edit') {
        this.areaAdderMode = mode
      } else {
        this.areaAdderMode = ''
      }
    },
    updateCityList(form) {
      this.getInitCityList()
      // const row = this.cityList.filter(row => form.code == row.code)[0]
      // row.code = form.code
      // row.name = form.name
      // row.hasCounty = form.hasCounty
    },
    updateAreaList(form){
      this.getInitAreaList(this.selectedCityCode)
    },
    init() {
      this.getInitCityList()
    },
    getInitCityList() {
      this.cityIsScrollTop = true
      this.cityComplete = false
      this.cityQuery = new Query()
      getCityList({...this.cityQuery, ...this.citySearchQuery}).then(res => {
        this.cityList = res.data.list
        this.cityLoading = false
        this.$nextTick(() => this.cityIsScrollTop = false)
      })
    },
    getMoreCityList(query = this.cityQuery) {
      if (this.cityLoading) return
      this.cityLoading = true
      getCityList({...query, ...this.citySearchQuery, begin: query.begin + 1}).then(res => {
        const data = res.data
        this.cityList = this.cityList.concat(data.list)
        this.cityQuery.begin = Number(data.begin) / query.count
        this.cityLoading = false
        // console.log(data.total, (query.begin + 1) * query.count)
        // console.log((query.begin + 1) * query.count >= data.total)
        if ((query.begin + 1) * query.count >= data.total) {
          this.cityComplete = true
        }
      })
    },
    getInitAreaList(selectedCityCode) {
      getAreaList({cityCode: selectedCityCode}).then(res => {
        this.areaList = res.data
        this.areaLoading = false
      })
    },
    // getMoreAreaList(selectedCityCode, query = this.areaQuery) {
    //   if (this.areaLoading || !selectedCityCode) return
    //   this.areaLoading = true
    //   getAreaList({params: {...query, begin: query.begin + 1}, cityCode: selectedCityCode}).then(res => {
    //     const data = res.data
    //     this.areaList = this.areaList.concat(data.list)
    //     this.areaQuery.begin = Number(data.begin) / query.count
    //     this.areaLoading = false
    //     if ((query.begin + 1) * query.count >= data.total) {
    //       this.areaComplete = true
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.page-table { display: flex; flex: 1; flex-direction: column; }

.grid { display: grid; flex: 1; grid-template-columns: 60% auto;
  .item { display: flex; flex-direction: column; }}
.grid { border: 1px solid #e3e3e3;
  .item:first-child { border-right: 4px solid #dbedfe;}
}

.title-bar { display: flex; padding: 4px 10px 4px 16px; align-items: center;
  h2 { margin-right: auto; }
  .op { display: flex;
    & > * { margin: 0 0 0 6px; }}}
.title-bar { background: #f6f6f6; border-bottom: 1px solid #85AFD6;
  h2 { font-size: 12px; font-weight: bold;}}
</style>